<template>
  <div class="system-settings">
    <div class="page-header">
      <h2>系统设置</h2>
      <p>系统配置与管理设置</p>
    </div>
    
    <div class="settings-content">
      <div class="settings-nav">
        <div class="nav-item" 
             v-for="category in settingsCategories" 
             :key="category.id"
             :class="{active: activeCategory === category.id}"
             @click="setActiveCategory(category.id)">
          <span class="nav-icon">{{ category.icon }}</span>
          <span class="nav-text">{{ category.name }}</span>
        </div>
      </div>
      
      <div class="settings-panel">
        <!-- 基本设置 -->
        <div v-if="activeCategory === 'basic'" class="setting-section">
          <h3>基本设置</h3>
          <div class="setting-group">
            <div class="setting-item">
              <label>系统名称</label>
              <input type="text" v-model="settings.systemName" placeholder="请输入系统名称">
            </div>
            <div class="setting-item">
              <label>公司名称</label>
              <input type="text" v-model="settings.companyName" placeholder="请输入公司名称">
            </div>
            <div class="setting-item">
              <label>系统Logo</label>
              <div class="file-upload">
                <button class="upload-btn">上传Logo</button>
                <span class="file-info">支持 PNG、JPG 格式，建议尺寸 200x60px</span>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 用户管理 -->
        <div v-if="activeCategory === 'users'" class="setting-section">
          <h3>用户管理</h3>
          <div class="setting-group">
            <div class="setting-item">
              <label>默认密码策略</label>
              <div class="checkbox-group">
                <label><input type="checkbox" v-model="settings.passwordPolicy.minLength"> 最少8位字符</label>
                <label><input type="checkbox" v-model="settings.passwordPolicy.requireNumbers"> 包含数字</label>
                <label><input type="checkbox" v-model="settings.passwordPolicy.requireSymbols"> 包含特殊字符</label>
              </div>
            </div>
            <div class="setting-item">
              <label>会话超时时间</label>
              <select v-model="settings.sessionTimeout">
                <option value="30">30分钟</option>
                <option value="60">1小时</option>
                <option value="120">2小时</option>
                <option value="480">8小时</option>
              </select>
            </div>
          </div>
        </div>
        
        <!-- 数据备份 -->
        <div v-if="activeCategory === 'backup'" class="setting-section">
          <h3>数据备份</h3>
          <div class="setting-group">
            <div class="setting-item">
              <label>自动备份</label>
              <div class="switch-group">
                <label class="switch">
                  <input type="checkbox" v-model="settings.autoBackup">
                  <span class="slider"></span>
                </label>
                <span>{{ settings.autoBackup ? '已启用' : '已禁用' }}</span>
              </div>
            </div>
            <div class="setting-item" v-if="settings.autoBackup">
              <label>备份频率</label>
              <select v-model="settings.backupFrequency">
                <option value="daily">每日备份</option>
                <option value="weekly">每周备份</option>
                <option value="monthly">每月备份</option>
              </select>
            </div>
            <div class="setting-item">
              <label>手动备份</label>
              <div class="backup-actions">
                <button class="action-btn primary" @click="createBackup">立即备份</button>
                <button class="action-btn" @click="viewBackupHistory">备份历史</button>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 系统日志 -->
        <div v-if="activeCategory === 'logs'" class="setting-section">
          <h3>系统日志</h3>
          <div class="setting-group">
            <div class="setting-item">
              <label>日志级别</label>
              <select v-model="settings.logLevel">
                <option value="error">错误</option>
                <option value="warn">警告</option>
                <option value="info">信息</option>
                <option value="debug">调试</option>
              </select>
            </div>
            <div class="setting-item">
              <label>日志保留时间</label>
              <select v-model="settings.logRetention">
                <option value="7">7天</option>
                <option value="30">30天</option>
                <option value="90">90天</option>
                <option value="365">1年</option>
              </select>
            </div>
            <div class="setting-item">
              <label>日志管理</label>
              <div class="log-actions">
                <button class="action-btn" @click="viewLogs">查看日志</button>
                <button class="action-btn danger" @click="clearLogs">清空日志</button>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 通知设置 -->
        <div v-if="activeCategory === 'notifications'" class="setting-section">
          <h3>通知设置</h3>
          <div class="setting-group">
            <div class="setting-item">
              <label>邮件通知</label>
              <div class="switch-group">
                <label class="switch">
                  <input type="checkbox" v-model="settings.emailNotifications">
                  <span class="slider"></span>
                </label>
                <span>{{ settings.emailNotifications ? '已启用' : '已禁用' }}</span>
              </div>
            </div>
            <div class="setting-item">
              <label>系统消息</label>
              <div class="switch-group">
                <label class="switch">
                  <input type="checkbox" v-model="settings.systemMessages">
                  <span class="slider"></span>
                </label>
                <span>{{ settings.systemMessages ? '已启用' : '已禁用' }}</span>
              </div>
            </div>
          </div>
        </div>
        
        <div class="setting-actions">
          <button class="action-btn primary" @click="saveSettings">保存设置</button>
          <button class="action-btn" @click="resetSettings">重置</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'SystemSettings',
  data() {
    return {
      activeCategory: 'basic',
      settingsCategories: [
        { id: 'basic', name: '基本设置', icon: '⚙️' },
        { id: 'users', name: '用户管理', icon: '👥' },
        { id: 'backup', name: '数据备份', icon: '💾' },
        { id: 'logs', name: '系统日志', icon: '📋' },
        { id: 'notifications', name: '通知设置', icon: '🔔' }
      ],
      settings: {
        systemName: 'ERP管理系统',
        companyName: '示例公司',
        passwordPolicy: {
          minLength: true,
          requireNumbers: true,
          requireSymbols: false
        },
        sessionTimeout: 60,
        autoBackup: true,
        backupFrequency: 'daily',
        logLevel: 'info',
        logRetention: 30,
        emailNotifications: true,
        systemMessages: true
      }
    }
  },
  methods: {
    setActiveCategory(categoryId) {
      this.activeCategory = categoryId
    },
    
    saveSettings() {
      console.log('保存设置:', this.settings)
      this.$message.success('设置保存成功')
    },
    
    resetSettings() {
      console.log('重置设置')
      this.$message.info('设置已重置')
    },
    
    createBackup() {
      console.log('创建备份')
      this.$message.success('备份创建成功')
    },
    
    viewBackupHistory() {
      console.log('查看备份历史')
    },
    
    viewLogs() {
      console.log('查看系统日志')
    },
    
    clearLogs() {
      console.log('清空系统日志')
      this.$message.warning('日志已清空')
    }
  }
}
</script>

<style scoped>
.system-settings {
  padding: 20px;
  background: #f5f7fa;
  min-height: 100vh;
}

.page-header {
  margin-bottom: 30px;
}

.page-header h2 {
  margin: 0 0 8px 0;
  color: #303133;
  font-size: 24px;
}

.page-header p {
  margin: 0;
  color: #909399;
  font-size: 14px;
}

.settings-content {
  display: flex;
  gap: 20px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.settings-nav {
  width: 200px;
  background: #f8f9fa;
  padding: 20px 0;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  cursor: pointer;
  transition: all 0.3s;
}

.nav-item:hover {
  background: #e9ecef;
}

.nav-item.active {
  background: #409eff;
  color: white;
}

.nav-icon {
  font-size: 16px;
}

.nav-text {
  font-size: 14px;
}

.settings-panel {
  flex: 1;
  padding: 30px;
}

.setting-section h3 {
  margin: 0 0 20px 0;
  font-size: 18px;
  color: #303133;
  border-bottom: 1px solid #ebeef5;
  padding-bottom: 10px;
}

.setting-group {
  margin-bottom: 30px;
}

.setting-item {
  margin-bottom: 20px;
}

.setting-item label {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  color: #303133;
  font-weight: 500;
}

.setting-item input[type="text"],
.setting-item select {
  width: 100%;
  max-width: 300px;
  padding: 8px 12px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  font-size: 14px;
}

.checkbox-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.checkbox-group label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: normal;
  margin-bottom: 0;
}

.switch-group {
  display: flex;
  align-items: center;
  gap: 12px;
}

.switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 24px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: .4s;
  border-radius: 24px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: .4s;
  border-radius: 50%;
}

input:checked + .slider {
  background-color: #409eff;
}

input:checked + .slider:before {
  transform: translateX(26px);
}

.file-upload {
  display: flex;
  align-items: center;
  gap: 12px;
}

.upload-btn {
  padding: 8px 16px;
  background: #409eff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

.upload-btn:hover {
  background: #337ecc;
}

.file-info {
  font-size: 12px;
  color: #909399;
}

.backup-actions,
.log-actions {
  display: flex;
  gap: 12px;
}

.action-btn {
  padding: 8px 16px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  background: white;
  color: #606266;
}

.action-btn:hover {
  border-color: #409eff;
  color: #409eff;
}

.action-btn.primary {
  background: #409eff;
  color: white;
  border-color: #409eff;
}

.action-btn.primary:hover {
  background: #337ecc;
}

.action-btn.danger {
  background: #f56c6c;
  color: white;
  border-color: #f56c6c;
}

.action-btn.danger:hover {
  background: #f24c4c;
}

.setting-actions {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid #ebeef5;
  display: flex;
  gap: 12px;
}
</style>